<template>
  <div class="contait">
    <div class="main">
      <div class="titles">
        <div style="display: flex;align-items: center;"><img class="title-img" src="../../assets/企业信息.png" alt="">
          <span>发布公告</span>
        </div>
        <div><el-button type="danger" plain @click="returnMsg" v-if="isOne==1">返回</el-button></div>
      </div>
      <el-divider />
      <div class="input-title">
        <span>公告名称</span><input placeholder="请输入公告名称" :disabled="isOne==1" :class="!noticeName ? 'showOutline' : ''" v-model="noticeName"
          type="text" />
      </div>
      <div class="showNotice" v-if="!noticeName">不能为空</div>
      <div class="title">公告内容</div>
      <Toolbar style="border: 1px solid #ccc;" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 300px;border-radius: 5px;margin-top: 10px;" v-model="valueHtml" :defaultConfig="editorConfig"
        :mode="mode" @onCreated="handleCreated" />
      <div class="title">{{isOne==1?'下载附件':isOne==0?'上传附件':'补充附件'}}</div>
      <div class="boxss">
      </div>
      <div class="uploadbox" v-if="isOne==0||isOne==2">
        <el-upload class="upload-demo" drag action="" :limit="maxNum" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx, .xls,.xlsx"
          multiple :on-change="changeFile" :auto-upload='false' v-model:file-list="fileList"
          :before-remove="beforeRemove" :disabled="isOne==1">
          <img src="../../assets/container.png" />
          <div class="bthUpload">选择文件</div>
          <upload-filled />
          <div class="el-upload__text">
            点击或将文件拖拽到这里上传
          </div>
        </el-upload>
      </div>
      <div v-if="isOne==1||isOne==2">
           <div class="downBox"  v-for="(item,index) in checkFiles" :key="index"><span>文件名：{{item}}</span><el-button  class="downBth" @click="downFile(item)"  type="danger">下载</el-button></div>
      </div>
      <el-divider />
      <div class="bthSure">
        <el-button type="danger" plain @click="returnMsg" v-if="isOne!=1">取消</el-button>
        <el-button type="danger" @click="putNotice" v-if="isOne!=1">{{isOne==0?'发布':'确定修改'}}</el-button>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"
import { onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage, ElMessageBox } from "element-plus"
import { toolbarConfig,MENU_CONF} from './wangSet'
import { saveNotice ,findNotice} from '../../util/api'
import { useRouter } from "vue-router";
const router = useRouter();
//公告名称
const noticeName = ref('')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('default')
// 富文本内容
const valueHtml = ref('')
//上传的文件列表
const fileList = ref([])
//最大上传数
const maxNum = ref(3)
//查看的文件名
const checkFiles = ref([])
//上传的文件
const uploadFile = ref([])
//判断是发布，查询还是编辑 0 1 2
const isOne:any = ref(0) 
//获得单条信息
const getMsg = async(id:any) =>{
      const res:any =await findNotice(id)
       console.log(res)
       if(res.code=='200'){
        valueHtml.value=res.data.content
        noticeName.value = res.data.name
        checkFiles.value=res.data.file.split(";")
       }
}
const props = defineProps({
    msgList:String,
    type:Number
})
const editorConfig:any = {
  placeholder: '请输入内容...',
  //配置工具栏
  toolbarConfig,
  MENU_CONF,

}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log(editor.getAllMenuKeys())
}

// 获取文件名字和地址
const changeFile = (file: any) => {
  uploadFile.value.push(file.raw)
}
const beforeRemove = (file: any, uploadFiles: any) => {
  uploadFile.value.forEach((item: any, index: any) => {
    if (item.uid == file.raw.uid) uploadFile.value.splice(index, 1)
  })
}
//发布公告
const putNotice = () => {
  if (noticeName.value == '' || noticeName.value == null) return ElMessage.error('请输入公告名称')
  let data = new FormData
  console.log(valueHtml.value)
  //公告名字
  data.append('name', noticeName.value)
  //公告内容
  data.append('content', valueHtml.value)
  if(isOne.value==2){//修改
    data.append('id', props.msgList)  
  }
  //公告附件
  uploadFile.value.forEach((item: any) => data.append('files', item))
  // console.log(uploadFile.value)
  saveNotice(data).then((res: any) => {
    console.log(res)
    if (res.code == '200') {
      ElMessageBox.confirm(
        isOne.value==2?'修改成功':'发布成功，是否继续发布?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '返回公告',
          type: 'success',
        }
      ).then(() => {
         router.go(0)
      }).catch(()=>{
        returnMsg()
      })
    } else {
      ElMessage.success('发布失败')
    }
  })

}
//下载附件
const downFile= async (item:any)=>{
    //  console.log(item)
    let link = document.createElement('a')
    link.style.display = 'none';
    link.href = '/api/file/show/'+item;
    link.download = item;
    link.click()
    window.URL.revokeObjectURL(link.href)
    // console.log(res)
}
//返回公告页
const returnMsg = () => {
  window.sessionStorage.setItem('isShowmsg', '0')
  router.go(0)
}
onMounted(() => {
    console.log(props.msgList)
    if(props.msgList){
      isOne.value=props.type
    getMsg(props.msgList)
    }
})
</script>
<style>
.w-e-bar {
  background-color: #FAFAFA;
}

.w-e-scroll {
  background-color: #FAFAFA;
}
</style>
<style lang="scss" scoped>
.contait {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.main {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: white;
  padding-top: 10px;
}

.titles {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 22px;
  color: #3B3B3B;
  justify-content: space-between;
}

.title-img {
  display: block;
  margin-right: 15px;
}

.title {
  margin: 30px 0;
  margin-bottom: 20px;
  font-size: 22px;
  color: #3B3B3B;
}

.input-title {
  font-size: 22px;
  color: #3B3B3B;
  display: flex;
  align-items: center;

  span {
    min-width: 6%;
    position: relative;
  }

  span::before {
    content: '*';
    position: absolute;
    top: 0;
    font-size: 24px;
    left: -12px;
    color: red;
  }

  input {
    flex: 1;
    border: none;
    outline: none;
    background-color: #FAFAFA;
    height: 44px;
    box-sizing: border-box;
    line-height: 44px;
    font-size: 20px;
    padding: 2px 10px;
    border-radius: 2px;
  }

  input::-webkit-input-placeholder {
    font-size: 18px;
    line-height: 44px;
  }

  .showOutline {
    box-sizing: border-box;
    border: 1px solid red;
  }
}

.showNotice {
  margin-left: 6%;
  height: 20px;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #E0211F;
  line-height: 20px;
  margin-top: 5px;
}

.el-upload__text {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}

.uploadbox {
  width: 340px;
  height: 200px;

  .bthUpload {
    width: 120px;
    height: 40px;
    text-align: center;
    border-radius: 2px;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05);
    line-height: 40px;
    margin: 0 auto;
    font-size: 16px;
    color: #0C131B;
  }
}

.el-upload-dragger {
  svg {
    display: none;
  }
}

.bthSure {
  width: 100%;
  display: flex;
  justify-content: right;
}

::v-deep(.el-upload-dragger) {
  border: 1px solid #EEEEEE;
  background-color: #FAFAFA;
}
.downBox{
  margin: 10px 0;
}
.downBth{
  margin-left: 20px;
}
  </style>